<!--
 * @name: 
 * @Author: JiaYing
 * @LastEditors: JiaYing
 * @Date: 2022-08-30 10:05:27
 * @LastEditTime: 2022-08-30 11:00:57
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>eventloop3</title>
  </head>
  <body>
    <button id="btn">btn</button>
    <div id="view"></div>
  </body>
</html>
<script>
  (function () {
    const btn = document.querySelector("#btn");
    const view = document.querySelector("#view");
    btn.addEventListener("click", function () {
      console.log("start");
      setTimeout(() => {
        console.log(1);
      });
      Promise.resolve().then(() => {
        console.log(2);
        // 读取未渲染在页面上的节点会阻塞
        const v = view.querySelector("#t-2000-50").offsetTop;
        console.dir(v);
        console.log(1);
      });
      // 阻塞渲染
      for (let y = 2000; y > 0; y--) {
        const fragment = new DocumentFragment();
        let last = null;
        for (let i = 50; i > 0; i--) {
          const div = document.createElement("div");
          div.id = `t-${y}-${i}`;
          div.innerHTML = y + "-" + i;
          fragment.appendChild(div);
          last = div;
        }
        view.appendChild(fragment);
        prev = last;
      }
      console.log(0);
    });
  })();
</script>
